<template>
  <Modal
    width="600"
    class="test-rule-modal"
    v-model="testModalShow"
    title="规则测试"
    :closable="false"
    :mask-closable="false"
    :transfer="false"
    >
      <p class="clearfix">
        <b class="fl">测试数据</b>
        <Button class="fr" :disabled="testForm.inputData.length < 1" @click="clearInuptData">清空</Button>
        <Button class="fr" style="margin-right: 10px;" :disabled="testForm.inputData.length < 1" @click="handleTest">开始测试</Button>
      </p>
      <Form
        class="test-rule-form"
        ref="testForm"
        :model="testForm"
        label-position="left"
        :label-width="80"
        >
        <p v-if="testForm.inputData.length < 1">暂无数据，请编写规则后执行此操作</p>
        <Row>
          <Col span="12" v-for="(item, index) in testForm.inputData" :key="index">
            <FormItem
              :label="item.label"
              :prop="'inputData.' + index + '.value'"
              :rules="{ required: true, message: `${item.label}不能为空`, trigger: 'blur'}"
            >
              <Input type="text" v-model="item.value" placeholder="请输入测试数据"></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <p>
        <b>测试结果</b>
        <div class="result-table">
          <Table
            :no-data-text="noData"
            :columns="columns"
            :data="tableData"
            border
            :height="height"
            ></Table>
        </div>
        <div slot="footer">
          <Button type="primary" @click="handleClose">关闭</Button>
        </div>
      </p>
    </Modal>
</template>

<script>
import { getResourceTestInputDataApi, testResourceContentByIdApi } from '@/api/project-resource'
export default {
  name: 'test_modal',
  props: ['projectId'],
  data () {
    return {
      testModalShow: false,
      rowData: {},
      testForm: {
        inputData: []
      },
      noData: '暂无数据',
      height: 'auto',
      columns: [{
        title: '输出数据',
        key: 'key'
      }, {
        title: '输出值',
        key: 'value'
      }],
      tableData: []
    }
  },
  computed: {
    proId () {
      return this.projectId
    }
  },
  methods: {
    // 清空测试数据
    clearInuptData () {
      this.testForm.inputData.forEach(item => {
        item.value = ''
      })
    },
    handleTest () {
      this.$refs.testForm.validate((vaild) => {
        if (vaild) {
          const params = {
            projectId: this.proId,
            resId: this.rowData.resId
          }
          const args = {}
          this.testForm.inputData.map(item => {
            args[item.code] = item.value
          })
          this.noData = '加载中...'
          testResourceContentByIdApi(params, args).then((res) => {
            const { code, data = [], msg } = res.data || {}
            if (code === 2000) {
              this.$Message.success('测试完成')
              this.tableData = data
              this.height = data.length < 2 ? 'auto' : 150
              data.length < 1 ? this.noData = '未查询到数据' : this.noData = ''
            } else {
              this.$Message.error(msg)
            }
          })
        }
      })
    },
    // 获取规则输入数据
    getInputData (row) {
      this.testModalShow = true
      this.tableData = []
      this.testForm.inputData = []
      this.rowData = row
      const params = {
        projectId: this.proId,
        resId: this.rowData.resId
      }
      getResourceTestInputDataApi(params).then((res) => {
        if (res.data.code === 2000) {
          if (res.data.data) {
            this.testForm.inputData = res.data.data.map(item => {
              return {
                label: item.dataName,
                code: item.dataCode,
                value: ''
              }
            })
          }
        }
      })
    },
    handleClose () {
      this.testModalShow = false
    }
  },
  activated () {
  },
  mounted () {
  }
}
</script>

<style scoped>
  .test-rule-form {
    border: 1px solid lightgray;
    padding-top: 20px;
    margin: 10px 0;
    padding: 10px;
    border-radius: 3px;
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
  }
</style>
